<template>
  <div class="bg">
    <nav-com
      title="余额充值"
      :showView="true"
      @back="backHandler()"
    ></nav-com>
    <div class="top-view">
      <div class="use-money">
        <div>账户可用余额</div>
        <div class="money">￥{{shareUser.price || 0}}</div>
      </div>
      <div
        class="to-Order"
        @click="toOrder"
      >
        充值记录 >
      </div>
    </div>
    <div class="center-view">
      <div style="margin:2vw 0">充值金额</div>
      <van-field
        style="background:#F7F7F7"
        v-model="rechargeMoney"
        placeholder="请输入充值金额"
        type="number"
        :border='true'
      />
      <div style="font-size:3vw;color:#808080;margin:2vw 0">规则：每次充值金额不少于1元。</div>
    </div>
    <div class="bottom-view">
      <div>选择充值方式</div>
      <div class="pay-type">
        <div
          v-if="appV<=105"
          class="pay"
          :class="activate==1?'activate':''"
          @click="changePay(1)"
        >
          <van-icon
            name="wechat-pay"
            color="#00c561"
            size="30"
          />
          微信支付
        </div>
        <div
          v-if="appV>105"
          class="pay"
          :class="activate==3?'activate':''"
          @click="changePay(3)"
        >
          <van-icon
            name="wechat-pay"
            color="#00c561"
            size="30"
          />
          微信支付<apan v-if="appV<=105">(新)</apan>
        </div>
        <div
          class="pay"
          :class="activate==2?'activate':''"
          @click="changePay(2)"
        >
          <!-- @click="changePay(2)" -->
          <van-icon
            name="alipay"
            color="#06b4fd"
            size="30"
          />支付宝
        </div>
      </div>
    </div>
    <div
      class="buttonsty"
      @click="confirm"
    >确定</div>
  </div>
</template>

<script>
import { postAlipay2, getuserInfo, weixinPay } from "@/api/api";
import { weixinPayStatus } from "@/api/areaApi";
import navCom from "@/component/nav";
import { Toast } from "vant";
export default {
  components: {
    navCom,
  },
  data() {
    return {
      rechargeMoney: "",
      activate: 1,
      shareUser: {},
      order_sn: "",
      appV: 106,
    };
  },
  mounted() {
    console.log(this.$http.VUE_APP_BASE_API);
    this.initData();
    if (weixin.isAndroid()) {
      this.appVision();
    }
    if (this.appV > 105) {
      this.activate = 3;
    }
  },
  methods: {
    // 检测app版本号
    appVision() {
      this.appV = Number(window.JS_TROOPS.getAppVersionCode());
    },
    initData() {
      getuserInfo().then((res) => {
        console.log("getuserInfo", res);
        if (res.data.code == 1) {
          this.shareUser = res.data.data;
        }
      });
    },
    //返回
    backHandler() {
      if (weixin.isAndroid()) {
        window.JS_TROOPS.goBack();
      } else {
        this.$router.go(-1);
      }
    },
    changePay(val) {
      this.activate = val;
    },
    toQrCodePay() {
      this.$dialog
        .alert({
          title: "支付方式",
          message:
            "亲，点击确定支付后-->截图保存支付码-->打开微信扫一扫-->识别扫码并支付，完成订单，半小时内有效。",
          confirmButtonText: "确定支付",
        })
        .then(() => {
          this.$router.push({
            name: "aliPay",
            params: { order_sn: this.order_sn, money: this.rechargeMoney },
          });
        })
        .catch((err) => {});
    },
    confirm() {
      if (!this.rechargeMoney) {
        Toast("请输入充值金额");
        return;
      }
      if (this.activate == 3) {
        weixinPayStatus({ fee: this.rechargeMoney }).then((res) => {
          console.log(res);
          if (res.data.code == 1) {
            weixinPay({
              str: `host=${this.$http.VUE_APP_BASE_API}&fee=${
                this.rechargeMoney
              }&token=${this.$wweixin.getToken()}`,
              weixinApi: true,
            }).then((res) => {
              if (res.data.code == 1) {
                let sendToApp = res.data.msg.openlink;
                console.log(sendToApp);
                window.JS_TROOPS.weixinpay(sendToApp);
              }
            });
          } else {
            this.$dialog.alert({
              title: "提示",
              message: res.data.msg,
            });
          }
        });
        return;
      }
      console.log(this.rechargeMoney, this.activate);
      let queryData = {
        order_sn: "",
        type: this.activate == 1 || this.activate == 3 ? "wechat" : "alipay",
        addevent: "wallet",
        fee: this.rechargeMoney,
      };
      console.log(queryData);
      postAlipay2(queryData)
        .then((res) => {
          // if(this.activate ==3 && weixin.isAndroid()){
          //   var url = res.data.data.url;
          //   window.JS_TROOPS.weixinpay(url);
          //   return
          // }
          if (res.data.data != null) {
            this.order_sn = res.data.data.order_sn;
          }
          if (res.data.code == 1) {
            var url = res.data.data.url;
            try {
              window.JS_TROOPS.alipay(url);
            } catch (e) {
              this.$router.push("/upgradeTips");
            }
          } else if (res.data.code == 0 && this.activate == 2) {
            this.$dialog
              .alert({
                title: "支付",
                message:
                  "亲，还没有开通本地支付宝商户，请点击确定，可选择本地微信支付！",
                confirmButtonText: "确定支付",
              })
              .then(() => {
                this.$router.push({
                  name: "aliPay",
                  params: {
                    order_sn: this.order_sn,
                    money: this.rechargeMoney,
                  },
                });
              });
          } else if (res.data.code == 0 && this.activate == 1) {
            this.toQrCodePay();
          } else if (res.data.code == 2) {
            console.log(545454545);
            this.$dialog.alert({
              title: "提示",
              message: res.data.msg,
              confirmButtonText: "确定",
            });
          }
        })
        .catch((err) => {});
      //   this.$dialog.alert({
      //     title: "支付宝支付",
      //     message:
      //       "亲，还没有开通本地支付宝商户，请点击确定，可选择本地微信支付！",
      //   });
    },
    toOrder() {
      this.$router.push("/rechargeOrder");
    },
  },
};
</script>

<style scoped>
.buttonsty {
  width: 90vw;
  margin: 5vw;
  height: 10vw;
  line-height: 10vw;
  border-radius: 5vw;
  color: #fff;
  text-align: center;
  background: linear-gradient(to right bottom, #00c989, #51e0b3);
}
.bottom-view {
  margin: 5vw;
  padding: 3vw 6vw;
  background: #fff;
  border-radius: 3vw;
}
.bottom-view .pay-type {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.bottom-view .pay-type .pay {
  display: flex;
  align-items: center;
  margin-top: 2vw;
  width: 32vw;
  border: 1px solid #b3b3b3;
  border-radius: 2vw;
  height: 12vw;
  line-height: 12vw;
  font-size: 4vw;
  padding: 0 2vw;
}
.center-view {
  margin: 5vw;
  padding: 3vw 6vw;
  background: #fff;
  border-radius: 3vw;
}
.activate {
  border: 1px solid #30d6a2 !important;
  background: rgba(70, 232, 181, 0.5);
}
.top-view {
  display: flex;
  justify-content: space-between;
  margin: 5vw;
  padding: 3vw 6vw;
  align-items: center;
  height: 15vh;
  background: linear-gradient(to right bottom, #00c989, #51e0b3);
  color: #fff;
  border-radius: 3vw;
}
.use-money {
  font-size: 4vw;
}
.use-money .money {
  font-size: 6vw;
}
.bg {
  background: #f2f3f7;
  min-height: 100vh;
}
</style>